// 通用样式（原子性样式）
// 消除浮动影响
.clearfix {
  &::before {
    display: table;
    content: '';
  }

  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

// 文本内容超出当前容器出...
.textellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 进度条样式
.loading-bar {
  height: 1px;
  width: 100%;
  position: fixed;
  z-index: 1;
}
.hover-active {
  &:hover {
    color: mix(mix(#fff, @text-color, 5%), #fff, 80%);
    background-color: mix(mix(@primary-color, #fff, 20%), #fff, 50%);
  }

  &.is-active {
    color: mix(#fff, @text-color, 5%);
    background-color: mix(@primary-color, #fff, 20%);
  }
}

.editor-border-active {
  border-color: @primary-color;
  box-shadow: 0 0 0 2px mix(white, @primary-color, 85%);
}
//  按钮（默认、行为级别 = 不常用 | 一般操作）
.app-button.ant-btn-default,
.app-button.ant-btn-default.srfactionlevel50,
.app-button.ant-btn-default.srfactionlevel100 {
  background: #fff;
  color: mix(#fff, @text-color, 20%);
  border-color: mix(#fff, @text-color, 70%);

  &:hover {
    background: #fff;
    color: @primary-color;
    border-color: @primary-color;
  }

  &:disabled,
  &:disabled:hover {
    background: mix(@text-color, #fff, 5%);
    color: mix(#fff, @text-color, 65%);
    border-color: mix(#fff, @text-color, 75%);
  }
}

//  按钮（行为级别 = 常用操作）
.app-button.ant-btn-default.srfactionlevel200 {
  background: mix(@primary-color, #fff, 20%);
  color: @primary-color;
  border-color: mix(@primary-color, #fff, 40%);

  &:hover {
    background: @primary-color;
    color: #fff;
    border-color: @primary-color;
  }

  &:disabled,
  &:disabled:hover {
    background: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
    color: mix(@primary-color, #fff, 50%);
    border-color: mix(mix(@primary-color, #fff, 20%), #fff, 80%);
  }
}

//  按钮（行为级别 = 关键操作）
.app-button.ant-btn-default.srfactionlevel250 {
  background: @primary-color;
  color: @btn-primary-color;
  border-color: @primary-color;

  &:hover,
  &:focus {
    background: mix(@primary-color, #fff, 80%);
    color: @btn-primary-color;
    border-color: mix(@primary-color, #fff, 80%);
  }

  &:disabled,
  &:disabled:hover {
    background: mix(@primary-color, #fff, 50%);
    color: @btn-primary-color;
    border-color: mix(@primary-color, #fff, 50%);
  }
}
